<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" width="50%" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
    <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right">
        <el-row :gutter="1">
            <el-col :span="12">
                <el-form-item label="保养项目编号" prop="code">
                    <el-input v-model="form.code" placeholder="保养项目编号" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="保养项目名称" prop="title">
                    <el-input v-model="form.title" placeholder="保养项目名称" clearable></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="1">
            <el-col :span="12">
                <el-form-item label="保养部门" prop="dept_id">
                    <el-select v-model="form.dept_id" placeholder="请选择保养部门" style="width: 100%" filterable>
                        <el-option v-for="item in depList" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="设备编码" prop="device_id">
                    <div style="display: flex; width: 100%">
                        <el-input v-model="device_code" readonly style="width: 100%"  placeholder="设备编码" ></el-input>
                        <el-button @click="checkDev" type="primary">选择设备</el-button>
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="1">
            <el-col :span="12">
                <el-form-item label="设备名称">
                    <el-input v-model="device_name" placeholder="设备名称" readonly></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="设备类别">
                    <el-input v-model="device_type" placeholder="设备类别" readonly></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" clearable></el-input>
        </el-form-item>
        <el-form-item label="保养内容" prop="item">
            <sc-form-table ref="table" v-model="form.item" :addTemplate="addTemplate" placeholder="暂无数据" height="400" drag-sort>
                <el-table-column prop="field" label="保养项" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.field" placeholder="请输入保养项" ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="ask" label="保养标准" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.ask" placeholder="请输入保养标准"></el-input>
                    </template>
                </el-table-column>
            </sc-form-table>
        </el-form-item>
    </el-form>
    <template #footer>
        <el-button @click="visible = false">取 消</el-button>
        <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
    <!-- <main-content v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></main-content> -->
  </el-dialog>
  <device-list v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable :query="{ is_no: 2, dept_id: form.dept_id }"></device-list>
</template>

<script>
import DeviceList from "@/views/device/deviceList.vue";
export default {
    components: { DeviceList },
    emits: ["success", "closed"],
    data() {
        return {
            mode: "add",
            titleMap: {
                add: "新增保养项目",
                edit: "编辑保养项目",
                show: "查看",
            },
            visible: false,
            isSaveing: false,
            dialog: {
                save: false,
            },
            //表单数据
            form: {
                id: "",
                code: "",
                title: "",
                remark: "",
                device_id: "",
                detail_id: "",
                item: [],
            },
            device_code: "",
            device_name: "",
            device_type: "",
            //验证规则
            rules: {
                title: [{ required: true, message: "请输入维保项目名称" }],
                code: [{ required: true, message: "请输入维保项目编号" }],
                device_id: [{ required: true, message: "请选择关联设备" }],
                detail_id: [{ required: true, message: "请选择维保内容" }],
            },
            device: [],
            content: [],
            addTemplate: {
                field: "",
                ask: "",
            },
            depList: [],
        };
    },
    mounted() {
        this.getInfo();
    },
    methods: {
        //显示
        open(mode = "add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    var res = [];
                    if (this.form.id) {
                        res = await this.$API.device.Maintain.edit.post(this.form);
                    } else {
                        res = await this.$API.device.Maintain.add.post(this.form);
                    }
                    this.isSaveing = false;
                    if (res.code == 1) {
                        this.$emit("success", this.form, this.mode);
                        this.visible = false;
                        this.$message.success("操作成功");
                    } else {
                        this.$alert(res.message, "提示", { type: "error" });
                    }
                } else {
                    return false;
                }
            });
        },
        //表单注入数据
        async setData(data) {
            var res = await this.$API.device.Maintain.detail.post({ id: data.id });
            this.form.id = res.data.id;
            this.form.title = data.title;
            this.form.code = data.code;
            this.form.remark = res.data.remark;
            this.form.device_id = res.data.device_id;
            this.form.detail_id = res.data.detail_id;
            this.form.system_disable = res.data.system_disable;
            this.form.dept_id = res.data.dept_id;
            // this.form.item = res.data.item
            let a = [];
            res.data.item.map((item) => {
                a.push({
                field: item.field,
                ask: item.ask,
                // type:Number(item.type),
                // need:item.need,
                // need1:item.need1,
                // disable:item.type!=2?true:false
                });
            });
            this.form.item = a;
            this.device_code = data.device_code;
            this.device_name = data.device_title;
            this.device_type = data.class_title;
        },
        change(row) {
            if (row.type != 2) {
                row.disable = true;
                row.need = "";
                row.need1 = "";
            } else {
                row.disable = false;
            }
        },
        typeChange(e) {
            this.device.map((item) => {
                if (e == item.id) {
                (this.code = item.code), (this.type = item.class_title);
                }
            });
        },
        // 选择设备
        checkDev() {
            this.dialog.save = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("add");
            });
        },
        handleSuccess(data) {
            this.form.device_id = data[0].id;
            this.device_code = data[0].code;
            this.device_name = data[0].title;
            this.device_type = data[0].class_title;
        },
        async getDept(e) {
            var res = await this.$API.all.getDep.get({ is_page: 0, org_id: e });
            this.depList = res.data;
        },
        async getInfo() {
            var res = await this.$API.admin.user.info.get();
            this.getDept(res.data.user.org_id);
            if (this.mode == "add") {
                this.form.dept_id = res.data.user.dept_id;
            }
        },
    },
};
</script>

<style></style>
